{% extends 'base.html' %}
{% load static %}

{% block title %}{{ video.title }} - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<div class="article-detail">
    <h1><i class="fas fa-video"></i> {{ video.title }}</h1>
    <div class="meta-info">
        <span><i class="fas fa-calendar-alt"></i> {{ video.publish_time|date:"Y/m/d" }}</span>
        <span><i class="fas fa-eye"></i> {{ video.views }} بازدید</span>
    </div>
    
    <!-- پخش‌کننده ویدئو -->
    <div style="position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; margin-bottom:20px;">
        <iframe src="{{ video.get_embed_url }}" 
                style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" 
                allow="autoplay; fullscreen; encrypted-media" 
                allowfullscreen>
        </iframe>
    </div>
    
    {% if video.description %}
    <div class="body-text">
        {{ video.description|linebreaks }}
    </div>
    {% endif %}
</div>

<!-- ویدئوهای مرتبط -->
{% if related_videos %}
<div style="margin-top: 30px; background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 3px 15px rgba(0,0,0,0.05);">
    <h3 style="color: var(--secondary-color); border-right: 5px solid var(--secondary-color); padding-right: 14px; font-size: 18px; font-weight: 700; margin-bottom: 18px;">
        <i class="fas fa-link"></i> ویدئوهای مرتبط
    </h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;">
        {% for related in related_videos %}
        <div class="video-item" style="margin:0;">
            <a href="{% url 'video_detail' related.slug %}" style="display:block; position:relative;">
                <img src="{{ related.thumbnail.url }}" alt="{{ related.title }}" style="height:130px;">
                <div class="play-icon" style="width:40px; height:40px; font-size:18px;">
                    <i class="fas fa-play"></i>
                </div>
            </a>
            <div class="info" style="padding:10px 15px;">
                <h4 style="font-size:14px;"><a href="{% url 'video_detail' related.slug %}">{{ related.title|truncatewords:8 }}</a></h4>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}